<template>
<div>
    <GoBack><span slot="content" class="set-title">勋章</span></GoBack>
    
    <div class="everyday medal-item">
        <van-cell  is-link class="title">
            <template #title>
                <span class="custom-title">日常勋章</span>
                <van-tag type="danger" class="medal-num" background-color="white">(已获得0枚)</van-tag>
                
            </template>
        </van-cell>
        <div class="medal-detail">
            <div class="item" @click="getId()">
                <img ref="imgt" src="https://image.hongbeibang.com/Fjunjg6SonYJRc83IbZ9hFMWmQke?1200X1200&imageView2/1/w/180/h/180" alt="">
                <p>一级任务勋章</p>
            </div>
            <div class="item">
                <img src="https://image.hongbeibang.com/FnEkydlR_RAdTTlFvJkh0K3dwr9E?1200X1200&imageView2/1/w/180/h/180" alt="">
                <p>二级任务勋章</p>
            </div>
            <div class="item">
                <img src="https://image.hongbeibang.com/Fh8yATjsLiWYWfKH7rDAx8vHOU2d?1200X1200&imageView2/1/w/180/h/180" alt="">
                <p>三级任务勋章</p>
            </div>
            <div class="item">
                <img src="https://image.hongbeibang.com/FjUXTpFvbERdByTW5_x8t1vRds14?1200X1200&imageView2/1/w/180/h/180" alt="">
                <p>坚持铜制勋章</p>
            </div>
            <div class="item">
                <img src="https://image.hongbeibang.com/Frhwm_0AUth34rRYZxjrwoCIRmyo?1200X1200&imageView2/1/w/180/h/180" alt="">
                <p>坚持银质勋章</p>
            </div>
            <div class="item">
                <img src="https://image.hongbeibang.com/FgC0K5IViDhQs7WNXFgRQQ9JLuvD?1200X1200&imageView2/1/w/180/h/180" alt="">
                <p>坚持金质勋章</p>
            </div>
        </div>
    </div>
    <div class="everyday medal-item">
        <van-cell  is-link class="title">
            <template #title>
                <span class="custom-title">特殊勋章</span>
                <van-tag type="danger" class="medal-num">(已获得0枚)</van-tag>
                
            </template>
        </van-cell>
        <div class="medal-detail">
            <div class="item">
                <img src="https://image.hongbeibang.com/Fs5HDlQCMSQxcUjdhUADLtLNhjF7?1200X1200&imageView2/1/w/180/h/180" alt="">
                <p>小酋长勋章</p>
            </div>
            <div class="item">
                <img src="https://image.hongbeibang.com/FnnpgwBuSeoY5VRaPQjst4qOH9Ay?1200X1200&imageView2/1/w/180/h/180" alt="">
                <p>大酋长勋章</p>
            </div><div class="item">
                <img src="" alt="">
                <p></p>
            </div>
        </div>
    </div>
</div>
</template>

<script>

import  '../../../assets/icon-font/iconfont.css'

import GoBack from '../../../components/GoBack'
import Vue from 'vue';
import { Cell,tag} from 'vant';


Vue.use(Cell);
Vue.use(tag);
export default {
    data () {
         return {
        list:[],
        }
    },
    components:{
        GoBack,
    },
    methods:{
        
    }
}
</script>

<style lang="scss" scoped>
    .medal-item{
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 20px;
        background: #fff;
        padding: 25px 13px;
        display: flex;
        flex-direction: column;

        .title{
            height: 24px;
            padding: 0;
            border: 0;
            .custom-title{
                vertical-align: middle;
                font-size: 16px;
                margin-right: 10px;
                color: #4A4945;
            }
            .medal-num{
                vertical-align: middle;
                font-size: 14px;
                color: #999999;
                background: #fff;
            }
        }
        .medal-detail{
            width: 100%;
            display: flex;
            justify-content: space-around;
            text-align: center;
            flex-wrap:wrap;
            .item{
                display: flex;
                flex-direction: column;
                margin: 15px 0px;
                img{
                    width: 102px;
                }
            }
        }
    }
</style>

